<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar :title="editType == 'add' ? '发起售后' : '售后内容完善'" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="formData" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="项目名称" borderBottom @click="showSelect('projectListShow')">
								<u-input
									:value="formData.project_item.project_name"
									disabled
									:color="editType == 'add' ? '' : '#c8c9cc'"
									disabledColor="#ffffff"
									placeholder="请选择项目名称"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="工程监理" borderBottom @click="showSelect('jlListShow')" v-if="userInfo.position_id != 8">
								<u-input
									:value="formData.engineering_supervision_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择工程监理"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="工程经理" borderBottom @click="showSelect('gcListShow')" v-if="userInfo.position_id == 8">
								<u-input
									:value="formData.engineering_manager_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择工程经理"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="售后内容" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="formData.problem_content"
									border="none"
									placeholder="请输入售后内容"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="现场对接联系电话" borderBottom>
								<u-input
									v-model="formData.scene_phone"
									type="number"
									:disabled="editType == 'edit'"
									disabledColor="#ffffff"
									:color="editType == 'add' ? '' : '#c8c9cc'"
									border="none"
									placeholder="请输入现场对接联系电话"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="期望上门时间" borderBottom @click="showSelect('expectedDoorstepTimeShow')">
								<u-input
									:value="formData.expected_doorstep_time"
									disabled
									disabledColor="#ffffff"
									:color="editType == 'add' ? '' : '#c8c9cc'"
									placeholder="请选择期望上门时间"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="上传图片/视频">
								<file-upload :filesList="list" :type="3" @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
		</pageTxt>

		<!-- 项目列表 -->
		<u-picker
			:show="projectListShow"
			:columns="projectList"
			keyName="project_name"
			@confirm="confirm($event, 'project_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>
		<!-- 工程经理 -->
		<u-picker
			:show="gcListShow"
			:columns="gcList"
			keyName="name"
			@confirm="confirm($event, 'engineering_manager_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>
		<!-- 工程监理 -->
		<u-picker
			:show="jlListShow"
			:columns="jlList"
			keyName="name"
			@confirm="confirm($event, 'engineering_supervision_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>
		<!-- 期望上门时间 -->
		<u-calendar
			:show="expectedDoorstepTimeShow"
			mode="single"
			@confirm="confirm($event, 'expected_doorstep_time')"
			color="#3B75FF"
			closeOnClickOverlay
			@close="close"
		></u-calendar>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: uni.getStorageSync('userInfo'),
			loading: false,
			list: [],
			delFile: [],
			editType: 'add',
			formData: {
				id: '',
				project_item: '',
				engineering_supervision_item: '',
				engineering_manager_item: '',
				problem_content: '',
				scene_phone: '',
				expected_doorstep_time: '',
				after_sales_file: []
			},

			// 相关数据
			expectedDoorstepTimeShow: false,
			projectList: [],
			projectListShow: false,
			gcList: [],
			gcListShow: false,
			jlList: [],
			jlListShow: false
		};
	},
	onLoad(e) {
		if (e.id) {
			this.$Apipc
				.newAfterSalesDetails({
					after_sales_id: e.id
				})
				.then((res) => {
					console.log(res, '售后详情');
					if (res.code == 200) {
						this.editType = 'edit';
						this.formData.id = e.id;
						this.formData.project_item = {
							id: res.data.project_id,
							project_name: res.data.project_name
						};
						this.formData.problem_content = res.data.problem_content;
						this.formData.expected_doorstep_time = res.data.expected_doorstep_time;
						this.formData.scene_phone = res.data.scene_phone;
						this.list = res.data.after_sales_attachments;
					}
				});
		}

		this.getList();
	},
	methods: {
		showSelect(type) {
			if (type == 'projectListShow' && !this.projectList[0].length) {
				uni.showToast({
					title: '暂无可选项目',
					icon: 'error'
				});
				return;
			}
			if (this.editType == 'add') {
				this[type] = true;
			} else {
				if (type == 'jlListShow' || type == 'gcListShow') {
					this[type] = true;
				}
			}
		},
		close() {
			this.expectedDoorstepTimeShow = false;
			this.projectListShow = false;
			this.gcListShow = false;
			this.jlListShow = false;
		},
		confirm(e, type) {
			console.log(e, type, 'confirm');
			if (type == 'expected_doorstep_time') {
				this.formData[type] = e[0];
			} else {
				this.formData[type] = e.value[0];
			}
			this.close();
		},
		afterRead(files) {
			files.map((item) => {
				let obj = {
					url: item.url
				};
				this.formData.after_sales_file.push(obj);
				console.log(this.formData.after_sales_file, 'afterRead');
			});
		},
		deletePic(e) {
			console.log(e, 'deletePic');
			if (e.file.file_id) {
				this.delFile.push(e.file.file_id);
				this.list.splice(e.index, 1);
			} else {
				this.formData.after_sales_file.splice(e.index, 1);
			}
		},
		async submit() {
			let formData = this.formData;
			let userInfo = this.userInfo;
			console.log(formData, 'sss');
			if (!formData.project_item) {
				this.$refs.uToast.show({
					message: '请选择售后项目'
				});
				return;
			}
			if (userInfo.position_id == 8) {
				if (!formData.engineering_manager_item) {
					this.$refs.uToast.show({
						message: '请选择工程经理'
					});
					return;
				}
			} else {
				if (!formData.engineering_supervision_item) {
					this.$refs.uToast.show({
						message: '请选择工程监理'
					});
					return;
				}
			}
			if (!formData.problem_content) {
				this.$refs.uToast.show({
					message: '请输入售后内容'
				});
				return;
			}
			if (!uni.$u.test.mobile(formData.scene_phone)) {
				this.$refs.uToast.show({
					message: '请输入正确的联系电话'
				});
				return;
			}
			if (!formData.expected_doorstep_time) {
				this.$refs.uToast.show({
					message: '请选择期望上门时间'
				});
				return;
			}
			if (formData.after_sales_file.length == 0 && this.editType == 'add') {
				this.$refs.uToast.show({
					message: '请上传图片/视频'
				});
				return;
			}
			if (formData.after_sales_file.length == 0 && this.editType == 'edit') {
				if (this.list.length == 0) {
					this.$refs.uToast.show({
						message: '请上传图片/视频'
					});
					return;
				}
			}
			uni.showLoading({
				mask: true
			});

			let resImg = {
				arrResult: []
			};
			if (formData.after_sales_file.length > 0) {
				resImg = await this.$upload(formData.after_sales_file);
			}
			console.log(resImg, 'upload');
			let data = {
				project_id: formData.project_item.id,
				problem_content: formData.problem_content,
				expected_doorstep_time: formData.expected_doorstep_time,
				scene_phone: formData.scene_phone,
				after_sales_file: resImg.arrResult
			};
			if (userInfo.position_id == 8) {
				data.engineering_supervision_id = userInfo.id;
				data.engineering_supervision_name = userInfo.name;
				data.engineering_manager_id = formData.engineering_manager_item.id;
				data.engineering_manager_name = formData.engineering_manager_item.name;
			} else {
				data.engineering_supervision_id = formData.engineering_supervision_item.id;
				data.engineering_supervision_name = formData.engineering_supervision_item.name;
			}
			if (this.editType == 'edit') {
				data.after_sales_id = formData.id;
				data.del_file_id_arr = this.delFile;

				var res = await this.$hApi.wxUpdAfterSales(data);
				console.log(res, 'wxUpdAfterSales');
			} else {
				var res = await this.$hApi.wxAddAfterSales(data);
				console.log(res, 'wxAddAfterSales');
			}

			uni.hideLoading();
			if (res.code == 200) {
				if (this.editType == 'add') {
					var pages = getCurrentPages();
					var perPage = pages[pages.length - 2];
					if (perPage && perPage.$vm.$refs.as) {
						perPage.$vm.$refs.as.searchFunc();
					}
				}

				setTimeout(() => {
					var currentPages = getCurrentPages()[getCurrentPages().length - 2];
					if (currentPages) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}, 500);
			}
			uni.showToast({
				title: res.code == 200 ? '操作成功' : res.message,
				icon: res.code == 200 ? 'success' : 'error'
			});
		},

		// 获取数据
		getList() {
			this.$hApi.getAfterSalesProjects({}).then((res) => {
				console.log(res, '获取项目列表');
				if (res.code == 200) {
					this.projectList = [res.data];
				}
			});
			if (this.userInfo.position_id == 8) {
				// 获取工程经理列表
				this.$Apipc
					.getAdminList({
						page: 1,
						num: 999,
						position_id_arr: [7],
						identity: 2
					})
					.then((res) => {
						console.log(res, '获取工程经理列表');
						if (res.code == 200) {
							this.gcList = [res.data.list];
						}
					});
			} else {
				// 获取工程监理列表
				this.$Apipc
					.getAdminList({
						page: 1,
						num: 999,
						position_id_arr: [8],
						identity: 1
					})
					.then((res) => {
						console.log(res, '获取工程监理列表');
						if (res.code == 200) {
							this.jlList = [res.data.list];
						}
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>
